<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Proteins</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
		<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
		<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'info.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'list.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'find.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'simpleExpressionPlots.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css/select2', file: 'select2.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'infoBox.css')}" type="text/css">
        <g:javascript library="jquery" />

        <r:layoutResources />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <g:javascript src="select2/select2.js" />
        <g:javascript src="find.js" />
  </head>
  <body>
  <g:render template="/main/header" />
    <div class="form">
      <g:set var="infoKey" value="${'search_bar'}" />
      <div class="query desc"><g:render template="../main/infoBox" />Search for</div>
      <g:set var="infoKey" value="${'search_experiments'}" />
      <div class="experiment desc"><g:render template="../main/infoBox" />Experiments</div>
    <form name="search">
      <input type="hidden" id="query" class="bigdrop" style="width:500px;" name="query" value="${Query}">
      <div class="experiments">
        <g:each in="${Projects}" var="proj">
          <div class="name"><input type="checkbox" name="project${proj.id}" checked="checked" value="${proj.id}" id="${proj.id}">${proj.name}</input></div>
        </g:each>
      </div>
      <g:submitToRemote action="proteinResults" update="results" value="Search" class="search"/>
      
    </form>
    </div>
    <div id="results"></div>
    <div id="box"></div>
    <g:if test="${ShowDefault}">
      <script type="text/javascript">
        $(document).ready(function () {
          <g:if test="${JQuery.size()>0}">
              $("#query").select2("data", ${JQuery});
          </g:if>
          $('form .search').click();
        });
      </script>
    </g:if>
  </body>
</html>
